<template>
  <div class="navigation-container">
    <!-- 头部搜索栏 -->
    <div class="navigation-header">
      <div class="header-left">
        <el-button circle @click="goBack" class="back-btn">
          <img :src="backIcon" alt="退出" class="back-icon" />
        </el-button>
      </div>
      <div class="search-container">
        <el-input v-model="searchQuery" placeholder="搜索设施, 如洗手间" prefix-icon="Search" clearable @input="handleSearch"
          class="search-input" />
      </div>
      <div class="header-right">
        <el-button circle @click="showMenu" class="menu-btn">
          <img :src="moreIcon" alt="更多" class="menu-icon" />
        </el-button>
      </div>
    </div>

    <!-- 地图区域 -->
    <div class="map-section">
      <div class="map-container">
        <!-- 地图内容 -->
        <div class="map-content">
          <div class="map-placeholder">
            <div class="map-title">地图·版本1</div>
            <div class="map-location">北京</div>
            <!-- 这里可以集成真实的地图组件 -->
          </div>
          
          <!-- 设施列表 -->
          <div class="facilities-list" v-if="filteredFacilities.length > 0">
            <div class="facilities-header">
              <h3>设施列表</h3>
            </div>
            <div class="facilities-items">
              <div 
                v-for="facility in filteredFacilities" 
                :key="facility.id"
                class="facility-item"
                @click="navigateTo(facility)"
              >
                <div class="facility-icon">
                  <el-icon>
                    <component :is="getFacilityIcon(facility.type)" />
                  </el-icon>
                </div>
                <div class="facility-info">
                  <div class="facility-name">{{ facility.name }}</div>
                  <div class="facility-description">{{ facility.description }}</div>
                  <div class="facility-status">
                    <el-tag :type="getStatusType(facility.status)" size="small">
                      {{ getStatusText(facility.status) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧楼层按钮 -->
        <div class="floor-buttons">
          <div class="floor-btn" :class="{ active: activeFloor === '1f' }" @click="handleFloorChange('1f')">
            1F
          </div>
          <div class="floor-btn" :class="{ active: activeFloor === '2f' }" @click="handleFloorChange('2f')">
            2F
          </div>
          <div class="floor-btn" :class="{ active: activeFloor === 'outdoor' }" @click="handleFloorChange('outdoor')">
            户外
          </div>
        </div>

        <!-- 底部进度条 -->
        <div class="progress-bar" :class="{ 'show': showCommonLocations }">
          <div class="progress-heart">
            <el-icon>
              <Star />
            </el-icon>
          </div>
          <div class="progress-text">99/150</div>
          <div class="progress-gift">
            <el-icon>
              <Present />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部常用地点 -->
    <div class="common-locations" :class="{ 'show': showCommonLocations }">
      <!-- 关闭按钮 -->
      <div class="close-btn-container">
        <div class="close-btn" @click="hideCommonLocations">
        </div>
      </div>

      <div class="locations-header">
        <h3 class="section-title">常用地点</h3>
      </div>
      <div class="location-buttons">
        <div class="location-btn main-stage" @click="navigateTo({ name: '主舞臺', type: 'stage' })">
          <div class="location-icon">
            <el-icon>
              <Microphone />
            </el-icon>
          </div>
          <span class="location-text">主舞臺</span>
        </div>
        <div class="location-btn dining" @click="navigateTo({ name: '餐饮区', type: 'dining' })">
          <div class="location-icon">
            <el-icon>
              <Food />
            </el-icon>
          </div>
          <span class="location-text">餐饮区</span>
        </div>
        <div class="location-btn restroom" @click="navigateTo({ name: '厕所', type: 'restroom' })">
          <div class="location-icon">
            <el-icon>
              <Male />
            </el-icon>
          </div>
          <span class="location-text">厕所</span>
        </div>
      </div>
    </div>

    <!-- 显示常用地点按钮 -->
    <div class="show-locations-btn" @click="toggleShowCommonLocations">
      <el-icon>
        <Location />
      </el-icon>
      <span>常用地点</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Star,
  Present,
  Microphone,
  Food,
  Male,
  Location,
  Close
} from '@element-plus/icons-vue'
import { searchFacilities, getFacilityTypes } from '@/api/navigation'
import type { Facility } from '@/types'

// 导入图片资源
import backIcon from '@/assets/images/BACK.png'
import moreIcon from '@/assets/images/more.png'

// 响应式数据
const searchQuery = ref('')
const activeFloor = ref('1f')
const progressPercentage = ref(66)
const facilities = ref<Facility[]>([])
const showCommonLocations = ref(false)

// 常用地点数据
const commonLocations = ref([
  {
    id: 1,
    name: '洗手间',
    description: '最近的洗手间位置',
    icon: 'House',
    color: '#4ecdc4'
  },
  {
    id: 2,
    name: '餐饮区',
    description: '美食和饮品区域',
    icon: 'Food',
    color: '#ff6b6b'
  },
  {
    id: 3,
    name: '医疗点',
    description: '紧急医疗服务',
    icon: 'FirstAidKit',
    color: '#45b7d1'
  },
  {
    id: 4,
    name: '休息区',
    description: '舒适的休息空间',
    icon: 'House',
    color: '#ffa726'
  }
])

// 获取路由
const router = useRouter()

// 计算属性
const filteredFacilities = computed(() => {
  let filtered = facilities.value.filter(facility => {
    if (activeFloor.value !== 'all' && facility.floor !== activeFloor.value) {
      return false
    }
    if (searchQuery.value && !facility.name.toLowerCase().includes(searchQuery.value.toLowerCase())) {
      return false
    }
    return true
  })
  return filtered
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取当前位置
const getCurrentLocation = () => {
  ElMessage.info('正在获取您的位置...')
  // 这里应该调用地理位置API
}

// 处理搜索
const handleSearch = async () => {
  try {
    if (searchQuery.value.trim()) {
      const response = await searchFacilities({ 
        q: searchQuery.value,
        floor: activeFloor.value 
      })
      facilities.value = response.data
    } else {
      // 如果搜索框为空，重新获取所有设施
      await fetchFacilities()
    }
  } catch (error) {
    console.error('搜索设施失败:', error)
    ElMessage.error('搜索设施失败')
  }
}

// 显示菜单
const showMenu = () => {
  ElMessage.info('菜单功能开发中...')
}

// 显示常用地点
const toggleShowCommonLocations = () => {
  showCommonLocations.value = true
}

// 隐藏常用地点
const hideCommonLocations = () => {
  showCommonLocations.value = false
}

// 处理楼层切换
const handleFloorChange = async (floor: string) => {
  activeFloor.value = floor
  // 根据楼层重新获取设施
  await fetchFacilities()
}

// 导航到指定地点
const navigateTo = (location: any) => {
  ElMessage.info(`正在导航到${location.name}...`)
  // 这里可以添加实际的导航逻辑
  console.log('导航到:', location)
}

// 查看设施详情
const viewFacility = (facility: Facility) => {
  ElMessage.info(`查看${facility.name}详情`)
}

// 格式化进度
const format = (percentage: number) => {
  return `${percentage}%`
}

// 获取设施图标
const getFacilityIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    'restroom': 'House',
    'food': 'Food',
    'medical': 'FirstAidKit',
    'rest': 'House',
    'parking': 'Car',
    'entrance': 'DoorOpen',
    'exit': 'DoorOpen'
  }
  return iconMap[type] || 'Location'
}

// 获取设施颜色
const getFacilityColor = (type: string) => {
  const colorMap: Record<string, string> = {
    'restroom': '#4ecdc4',
    'food': '#ff6b6b',
    'medical': '#45b7d1',
    'rest': '#ffa726',
    'parking': '#9c27b0',
    'entrance': '#4caf50',
    'exit': '#f44336'
  }
  return colorMap[type] || '#666'
}

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    'OPEN': 'success',
    'CLOSED': 'danger',
    'MAINTENANCE': 'warning'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'OPEN': '开放',
    'CLOSED': '关闭',
    'MAINTENANCE': '维护中'
  }
  return statusMap[status] || '未知'
}

// 获取设施列表
const fetchFacilities = async () => {
  try {
    const response = await searchFacilities({ floor: activeFloor.value })
    facilities.value = response.data
  } catch (error) {
    console.error('获取设施列表失败:', error)
    ElMessage.error('获取设施列表失败')
  }
}

// 页面挂载时执行
onMounted(() => {
  fetchFacilities()
})
</script>

<style lang="scss" scoped>
.navigation-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20px;
}



.navigation-header {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  color: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.header-left,
.header-right {
  flex: 0 0 auto;
}

.search-container {
  flex: 1;
  margin: 0 20px;
}

.search-input {
  width: 100%;
}

.menu-btn {
  background: transparent;
  border: none;
  color: white;
  
  &:hover {
    background: transparent;
  }
}

.back-btn {
  background: transparent;
  border: none;
  color: white;
  
  &:hover {
    background: transparent;
  }
}

.back-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
  flex-shrink: 0;
}

.menu-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
  flex-shrink: 0;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.map-section {
  margin-top: 100px;
  /* Adjust based on header height */
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 100px - 20px - 20px);
  /* Adjust for header and padding */
}

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  /* Placeholder for map background */
}

.map-placeholder {
  text-align: center;
  color: #666;
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);

  .map-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
  }

  .map-location {
    font-size: 16px;
    color: #999;
  }
}

.facilities-list {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.facilities-header {
  margin-bottom: 15px;
  
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
}

.facilities-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.facility-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eee;
  
  &:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
  }
}

.facility-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.facility-info {
  flex: 1;
  
  .facility-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }
  
  .facility-description {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
  }
  
  .facility-status {
    display: flex;
    justify-content: flex-end;
  }
}

.floor-buttons {
  position: fixed;
  top: 120px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.floor-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
  text-align: center;

  &.active {
    background-color: #4CAF50;
    border: 2px solid #4CAF50;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

.progress-bar {
  position: fixed;
  bottom: 70px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #4CAF50;
  border-radius: 25px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: bottom 0.3s ease-in-out;

  &.show {
    bottom: 370px;
  }
}

.progress-heart,
.progress-gift {
  font-size: 20px;
  color: white;
}

.progress-text {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.common-locations {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  z-index: 9;
  background: #333;
  padding: 20px;
  border-top: 1px solid #444;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  transition: bottom 0.3s ease-in-out;

  &.show {
    bottom: 0;
  }
}

.close-btn-container {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.close-btn {
  width: 250px;
  height: 5px;
  background: #000;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  &:hover {
    background: #000;
    transform: scale(1);
  }
}

.locations-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px;
  margin-top: 20px;
  padding-left: 20px;
}

.show-locations-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 8;

  &:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  span {
    font-size: 14px;
    font-weight: 500;
  }
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0 0 20px 0;
  text-align: center;
}

.location-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.location-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.3s ease;
  padding: 12px 20px;
  width: 90%;
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;

  &:hover {
    transform: translateY(-2px);
  }
}

.location-icon {
  font-size: 24px;
  color: white;
  background: inherit;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
}

.location-text {
  font-size: 14px;
  color: white;
  text-align: left;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.main-stage {
  //background: linear-gradient(135deg, #FF6B9D, #FF8E53);
}

.dining {
  //background: linear-gradient(135deg, #FF9A56, #FFB347);
}

.restroom {
  //background: linear-gradient(135deg, #4ECDC4, #44A08D);
}

// 移动端适配
@media screen and (max-width: 768px) {
  .navigation-header {
    padding: 10px 15px;
    top: 0;
  }

  .map-section {
    margin-top: 80px;
    padding: 15px;
  }

  .floor-buttons {
    top: 110px;
    right: 15px;
    gap: 8px;
  }

  .floor-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-width: 35px;
  }

  .progress-bar {
    bottom: 60px;
    left: 15px;
    right: 15px;
    padding: 10px 15px;

    &.show {
      bottom: 265px;
    }
  }

  .progress-text {
    font-size: 14px;
  }

  .common-locations {
    padding: 10px;

    &.show {
      bottom: 0;
    }
  }

  .locations-header {
    padding-left: 15px;
  }

  .close-btn-container {
    top: 6px;
  }

  .close-btn {
    width: 200px;
    height: 9px;
    border-radius: 9px;
  }

  .show-locations-btn {
    bottom: 15px;
    padding: 10px 16px;

    span {
      font-size: 12px;
    }
  }

  .location-buttons {
    gap: 0px;
  }

  .location-btn {
    padding: 10px 15px;
    width: 90%;
    gap: 8px;
  }

  .location-icon {
    font-size: 20px;
    padding: 8px;
  }

  .location-text {
    font-size: 12px;
  }
  
  .back-icon {
    width: 26px;
    height: 26px;
  }
  
  .menu-icon {
    width: 26px;
    height: 26px;
  }
  
  .facilities-list {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 10px;
    max-height: 250px;
  }
  
  .facility-item {
    padding: 8px;
    gap: 8px;
  }
  
  .facility-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .facility-info {
    .facility-name {
      font-size: 13px;
    }
    
    .facility-description {
      font-size: 11px;
    }
  }
}
</style>